<template>
  <div>
    <p class="x1">这是vue的第一节课</p>
    <h1>{{ num }}</h1>
    <h1>{{ str }}</h1>
    <h1>{{ numPow3 }}</h1>
    <button v-on:click="add()">button1</button>
    <button @click="add()">button2</button>
    <div ref="zejun" class="box" @mousedown="down" @mouseup="up" @mousemove="move"></div>

    <div class="hello" v-bind:class="{ active: num % 2 != 0 }"></div>
    <div :kkkk="str"></div>
  </div>
</template>

<script>
export default {
  //1.data响应式数据
  //2.method回调函数 + 回掉函数的参数
  //3.vue中事件的写法
  //4.ref获取标签的属性
  //5.computed  + watch
  //6.class的绑定


  data: function () {
    return {
      num: 100,
      str: "abc",
      isDown: false,
      ox: 0,
      oy: 0,
      cx: 0,
      cy: 0,
    }
  },


  //回调函数
  methods: {
    add() {
      this.num++
    },

    down(e) {
      this.isDown = true;
      this.ox = e.offsetX;
      this.oy = e.offsetY;
    },

    up() {
      this.isDown = false;
    },

    move(e) {
      if (this.isDown == true) {
        var { zejun } = this.$refs
        this.cx = e.clientX;
        this.cy = e.clientY;
        zejun.style.left = this.cx - this.ox + 'px';
        zejun.style.top = this.cy - this.oy + 'px';
      }
    }
  },


  //对数据的二次计算(加工)，当做数据使用
  computed: {
    numPow3() {
      return Math.pow(this.num, 1 / 2)
    }
  },


  //侦听 监控数据的变化 上传数据 报错->上报到服务器 数据的发送和获取
  watch: {
    num(newValue, oldValue) {
      console.log(newValue, oldValue)
    }
  }
}
</script>

<style>
.p1 {
  color: red;
}

.box {
  height: 200px;
  width: 200px;
  background-color: black;
  position: absolute;
}

.hello {
  height: 200px;
  width: 200px;
  background-color: blue;
  border-radius: 30px;
  transform: translateX(300px);
}

.active {
  height: 300px;
  width: 300px;
  background-color: purple;
  transform: translateX(300px);
}
</style>
